page.css 8.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364
  1. .vux-drawer {
  2. display: block;
  3. position: relative;
  4. top: 0;
  5. left: 0;
  6. width: 100%;
  7. min-height: 100vh;
  8. }
  9. .vux-drawer>.vux-drawer-body {
  10. height: 100%;
  11. position: absolute;
  12. top: 0;
  13. left: 0;
  14. right: 0;
  15. bottom: 0;
  16. -webkit-transition: visibility .38s, -webkit-transform .38s ease-in-out;
  17. transition: visibility .38s, -webkit-transform .38s ease-in-out;
  18. -o-transition: transform ease-in-out .38s, visibility .38s;
  19. transition: transform .38s ease-in-out, visibility .38s;
  20. transition: transform .38s ease-in-out, visibility .38s, -webkit-transform .38s ease-in-out;
  21. }
  22. #app, .router-view {
  23. max-width: 4.02rem;
  24. }
  25. #app .router-view {
  26. width: 100vw;
  27. height: 100%;
  28. overflow-y: auto;
  29. -webkit-box-sizing: border-box;
  30. box-sizing: border-box;
  31. }
  32. .headerBack .left,.headerBack {
  33. display: -webkit-box;
  34. display: -ms-flexbox;
  35. display: flex;
  36. -webkit-box-align: center;
  37. -ms-flex-align: center;
  38. align-items: center;
  39. }
  40. .headerBack {
  41. position: fixed;
  42. z-index: 9;
  43. height: .44rem;
  44. width: 100%;
  45. font-family: SWISSC-BT;
  46. max-width: 4.02rem;
  47. background-color: #0d1933;
  48. padding: 0 .14rem;
  49. -webkit-box-sizing: border-box;
  50. box-sizing: border-box;
  51. -webkit-transform: translateZ(0);
  52. transform: translateZ(0);
  53. }
  54. .headerBack .iconfont {
  55. font-size: .24rem;
  56. color: #fff;
  57. width: .4rem;
  58. cursor: pointer;
  59. }
  60. .headerBack .title {
  61. color: #fff;
  62. font-size: .2rem;
  63. width: 100%;
  64. }
  65. .headerBack .title span {
  66. font-size: .16rem !important;
  67. }
  68. .headerBack .right {
  69. width: .4rem;
  70. text-align: right;
  71. }
  72. .headerBack .right .icon-home_line {
  73. display: inline-block;
  74. font-size: .24rem;
  75. color: #fff;
  76. }
  77. .tabs {
  78. margin: .44rem .06rem 0;
  79. height: .36rem;
  80. line-height: .36rem;
  81. font-family: SWISSC;
  82. }
  83. .van-tab__text-wrapper, .van-tabs {
  84. position: relative;
  85. }
  86. .tabs.van-tabs--line .van-tabs__wrap {
  87. height: 100%;
  88. }
  89. .van-tabs--line .van-tabs__wrap {
  90. height: 44px;
  91. }
  92. .van-tabs__wrap {
  93. overflow: hidden;
  94. }
  95. .tabs .van-tabs__nav--line {
  96. padding-bottom: .15rem;
  97. }
  98. .tabs .van-tabs__nav {
  99. background: 0 0;
  100. -webkit-box-pack: justify;
  101. -ms-flex-pack: justify;
  102. justify-content: space-between;
  103. }
  104. .van-tabs__nav--line.van-tabs__nav--complete {
  105. padding-right: 8px;
  106. padding-left: 8px;
  107. }
  108. .van-tabs__wrap--scrollable .van-tabs__nav {
  109. overflow-x: auto;
  110. overflow-y: hidden;
  111. -webkit-overflow-scrolling: touch;
  112. }
  113. .van-tabs__nav--line.van-tabs__nav--complete {
  114. padding-right: 8px;
  115. padding-left: 8px;
  116. }
  117. .van-tabs__nav--line {
  118. box-sizing: content-box;
  119. height: 100%;
  120. padding-bottom: 15px;
  121. }
  122. .van-tabs__nav {
  123. position: relative;
  124. display: -webkit-box;
  125. display: -webkit-flex;
  126. display: flex;
  127. background-color: #fff;
  128. -webkit-user-select: none;
  129. user-select: none;
  130. }
  131. .tabs.alginLeft .van-tab {
  132. margin-right: 0 !important;
  133. padding: 0 .04rem;
  134. }
  135. body .van-tabs.alginLeft .van-tab {
  136. display: -webkit-box;
  137. display: -ms-flexbox;
  138. display: flex;
  139. -webkit-box-flex: initial;
  140. -ms-flex: initial;
  141. flex: initial;
  142. margin-right: .08rem;
  143. }
  144. .van-tabs__wrap--scrollable .van-tab {
  145. -webkit-box-flex: 1;
  146. -webkit-flex: 1 0 auto;
  147. flex: 1 0 auto;
  148. padding: 0 12px;
  149. }
  150. .van-tab--active {
  151. color: #323233;
  152. font-weight: 500;
  153. }
  154. .tabs .van-tab__text {
  155. font-size: .13rem;
  156. color: grey;
  157. }
  158. #app .router-view {
  159. width: 100vw;
  160. height: 100%;
  161. overflow-y: auto;
  162. -webkit-box-sizing: border-box;
  163. box-sizing: border-box;
  164. }
  165. #app {
  166. font-size: 0.14rem;
  167. width: 100vw;
  168. height: 100%;
  169. background-color: #000;
  170. margin: 0 auto;
  171. min-height: 100%;
  172. -webkit-box-sizing: border-box;
  173. box-sizing: border-box;
  174. }
  175. .tabs .van-tabs__line {
  176. width: .3rem;
  177. height: .01rem;
  178. background: -webkit-gradient(linear, left top, left bottom, from(#ff9323), to(#ff6a01));
  179. background: -webkit-linear-gradient(top, #ff9323, #ff6a01);
  180. background: -o-linear-gradient(top, #ff9323, #ff6a01);
  181. background: linear-gradient(180deg, #ff9323, #ff6a01);
  182. bottom: .22rem;
  183. }
  184. .van-tabs__line{
  185. position: absolute;
  186. bottom: 15px;
  187. left: 0;
  188. z-index: 1;
  189. width: 40px;
  190. height: 3px;
  191. background-color: #ee0a24;
  192. border-radius: 3px;
  193. }
  194. .vux-drawer>.vux-drawer-body>.drawer-mask, .vux-drawer>.vux-drawer-content {
  195. height: 100vh;
  196. }
  197. .vux-drawer>.vux-drawer-body>.drawer-mask {
  198. z-index: 9999;
  199. position: absolute;
  200. top: 0;
  201. left: 0;
  202. right: 0;
  203. bottom: 0;
  204. visibility: hidden;
  205. opacity: 0;
  206. -webkit-transition: opacity .38s ease-in-out, visibility .38s ease-in-out;
  207. -o-transition: opacity ease-in-out .38s, visibility ease-in-out .38s;
  208. transition: opacity .38s ease-in-out, visibility .38s ease-in-out;
  209. background-color: rgba(0, 0, 0, .3);
  210. }
  211. .referralFaq {
  212. font-family: SWISSC;
  213. background: #fff;
  214. border-radius: .1rem;
  215. min-height: -webkit-calc(100vh - 1.5rem);
  216. min-height: calc(100vh - 1.5rem);
  217. padding: 0 .1rem;
  218. margin: 0 .11rem .46rem;
  219. }
  220. .referralFaq .content {
  221. padding: .14rem 0 .18rem;
  222. }
  223. .referralFaq .content h2 {
  224. font-size: .18rem;
  225. color: #383838;
  226. border-bottom: .01rem solid #bdbdbd;
  227. line-height: .22rem;
  228. }
  229. .referralFaq .content div {
  230. color: grey;
  231. font-size: .14rem;
  232. line-height: .16rem;
  233. margin-top: .05rem;
  234. }
  235. .referralFaq .content .link {
  236. display: -webkit-box;
  237. display: -ms-flexbox;
  238. display: flex;
  239. -webkit-box-orient: vertical;
  240. -webkit-box-direction: normal;
  241. -ms-flex-direction: column;
  242. flex-direction: column;
  243. }
  244. .referralFaq .content .link a {
  245. color: #009d80;
  246. font-size: .14rem;
  247. line-height: .22rem;
  248. cursor: pointer;
  249. }
  250. .imgContent.rowReverse {
  251. -webkit-box-orient: horizontal;
  252. -webkit-box-direction: reverse;
  253. -ms-flex-direction: row-reverse;
  254. flex-direction: row-reverse;
  255. padding-left: 0;
  256. -webkit-box-pack: justify;
  257. -ms-flex-pack: justify;
  258. justify-content: space-between;
  259. }
  260. .imgContent {
  261. display: -webkit-box;
  262. display: -ms-flexbox;
  263. display: flex;
  264. -webkit-box-align: center;
  265. -ms-flex-align: center;
  266. align-items: center;
  267. color: red;
  268. font-size: .15rem;
  269. line-height: .19rem;
  270. padding: .04rem 0 .15rem;
  271. position: relative;
  272. }
  273. .imgContent img {
  274. width: .67rem;
  275. }
  276. .imgContent.rowReverse .slider {
  277. top: .24rem;
  278. right: .76rem;
  279. }
  280. .imgContent .slider {
  281. position: absolute;
  282. width: .6rem;
  283. top: .26rem;
  284. right: .1rem;
  285. }
  286. .van-slider {
  287. position: relative;
  288. width: 100%;
  289. height: 2px;
  290. background-color: #ebedf0;
  291. border-radius: 999px;
  292. cursor: pointer;
  293. }
  294. .van-slider__bar {
  295. position: relative;
  296. width: 100%;
  297. height: 100%;
  298. background-color: #1989fa;
  299. border-radius: inherit;
  300. -webkit-transition: all .2s;
  301. transition: all .2s;
  302. }
  303. .van-slider__button-wrapper, .van-slider__button-wrapper-right {
  304. position: absolute;
  305. top: 50%;
  306. right: 0;
  307. -webkit-transform: translate3d(50%, -50%, 0);
  308. transform: translate3d(50%, -50%, 0);
  309. cursor: grab;
  310. }
  311. .imgContent .slider .img {
  312. background: url('/img/huakuai.png') 50% no-repeat;
  313. height: .16rem;
  314. width: .16rem;
  315. background-size: auto 100%;
  316. }
  317. .groupTitle {
  318. font-size: .14rem;
  319. font-family: SWISSC-BT;
  320. text-align: center;
  321. margin: .04rem 0;
  322. color: #442729;
  323. }
  324. .groupImg {
  325. width: 100%;
  326. margin-bottom: .2rem;
  327. }
  328. ul.rules {
  329. display: list-item;
  330. color: #383838;
  331. font-size: .12rem;
  332. line-height: .14rem;
  333. padding-left: .18rem;
  334. }
  335. ul.rules li {
  336. display: list-item;
  337. list-style: decimal;
  338. margin-top: .12rem;
  339. }
  340. .referralFaq .content div p {
  341. margin: .04rem 0;
  342. }
  343. .van-tab {
  344. position: relative;
  345. display: -webkit-box;
  346. display: -webkit-flex;
  347. display: flex;
  348. -webkit-box-flex: 1;
  349. -webkit-flex: 1;
  350. flex: 1;
  351. -webkit-box-align: center;
  352. -webkit-align-items: center;
  353. align-items: center;
  354. -webkit-box-pack: center;
  355. -webkit-justify-content: center;
  356. justify-content: center;
  357. box-sizing: border-box;
  358. padding: 0 4px;
  359. color: #646566;
  360. font-size: 14px;
  361. line-height: 20px;
  362. cursor: pointer;
  363. }